appDisplay: Fix accessibility for application folders

Currently, application folders have a `checkbutton` role, which
is confusing for the user because it's not something that
changes its checked status, but a button that opens the contents
of the folder. Also, the only indication that this is a folder
and not a "normal" application is that role, which means that an
user must know that pushbuttons are applications and checkbuttons
are folders, which is confusing.

This patch fixes this by adding the "expandable" accessible
state to the folder button, thus notifying the user that it is
an element with extra elements inside.

It also adds the folder name and the type as the full container
label when opening a folder, thus ensuring that the user knows
where they are.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/4109>
(cherry picked from commit 6b01ddb1b445045696d1b3f70d644be77e1f03b4)

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 968b7b8188f3d5257fc16358563d3cea3795bbef..83169cdf301f9393c8073aa9e1df83afd888109e 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1,3 +1,4 @@
+import Atk from 'gi://Atk';
 import Clutter from 'gi://Clutter';
 import Cogl from 'gi://Cogl';
 import GLib from 'gi://GLib';
@@ -2281,6 +2282,9 @@ export const FolderIcon = GObject.registerClass({
             button_mask: St.ButtonMask.ONE,
             can_focus: true,
         }, global.settings.is_writable('app-picker-layout'));
+
+        this.add_accessible_state(Atk.StateType.EXPANDABLE);
+
         this._id = id;
         this._name = '';
         this._parentView = parentView;
@@ -2440,6 +2444,11 @@ export const FolderIcon = GObject.registerClass({
                     mode,
                     delay: isOpen ? 0 : FOLDER_DIALOG_ANIMATION_TIME - duration,
                 });
+
+                if (isOpen)
+                    this.add_accessible_state(Atk.StateType.EXPANDED);
+                else
+                    this.remove_accessible_state(Atk.StateType.EXPANDED);
             });
         }
     }
@@ -2456,6 +2465,8 @@ export const AppFolderDialog = GObject.registerClass({
             x_expand: true,
             y_expand: true,
             reactive: true,
+            accessible_name: source.name,
+            accessible_role: Atk.Role.PANEL,
         });
 
         this.add_constraint(new Layout.MonitorConstraint({primary: true}));